import React from 'react';
import { Video } from '../types';
import { Play } from 'lucide-react';
import { Link } from 'react-router-dom';

interface VideoCardProps {
  video: Video;
}

export function VideoCard({ video }: VideoCardProps) {
  return (
    <Link to={`/video/${video.id}`} className="block">
      <div className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
        <div className="relative group">
          <img 
            src={video.thumbnail} 
            alt={video.title}
            className="w-full h-48 object-cover"
          />
          <div className="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-opacity flex items-center justify-center">
            <Play className="text-white opacity-0 group-hover:opacity-100 transition-opacity" size={48} />
          </div>
          <span className="absolute bottom-2 right-2 bg-black bg-opacity-75 text-white px-2 py-1 rounded text-sm">
            {video.duration}
          </span>
        </div>
        <div className="p-4">
          <h3 className="text-lg font-semibold mb-2 line-clamp-2">{video.title}</h3>
          <div className="flex justify-between text-sm text-gray-600">
            <span>{video.views.toLocaleString()} 次观看</span>
            <span>{video.uploadDate}</span>
          </div>
        </div>
      </div>
    </Link>
  );
}